/**
 * 水印指令
 *
 *    v-waterMarker="'版本所有'"
 */

const waterMarker = {
  mounted(el, binding) {
    // 1. 创建一个 canvas 元素
    const canvas = document.createElement("canvas");
    // 2. 设置它的width与height
    canvas.width = 250;
    canvas.height = 100;
    // 3. 添加到页面
    document.body.appendChild(canvas);
    // 4. 获取 canvas 的 2d 对象
    const ctx = canvas.getContext("2d");
    // 5. 旋转 canvas
    ctx.rotate((-20 * Math.PI) / 180);
    // 6. 设置字体样式
    ctx.font = "28px Microsoft JhengHei";
    // 7. 写文字
    ctx.fillText(binding.value, 100, 100);
    // 8. 生成图片
    const img = canvas.toDataURL("image/png");
    console.log("img", img);
    // 9. 给 el 元素设置背景
    el.style.backgroundImage = "url(" + img + ")";
    // 10. 移除canvas元素
    document.body.removeChild(canvas);
  },
};

export default waterMarker;
